@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(200deg, #eef1f5, #e6e9f0);
}

.swipe {
  position: relative;
  width: 800px;
  height: 500px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  /* for属性值以indicator开头的所有label元素动画 */
}
.swipe ul {
  padding: 0;
  width: 2400px;
  transition: 0.5s;
}
.swipe li {
  list-style: none;
  float: left;
  width: 800px;
  height: 500px;
  line-height: 500px;
  font-size: 50px;
}
.swipe li:nth-child(1) {
  background-color: plum;
}
.swipe li:nth-child(2) {
  background-color: lightblue;
}
.swipe li:nth-child(3) {
  background-color: lightsalmon;
}
.swipe label[for^=indicator] {
  position: absolute;
  top: 450px;
  width: 20px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}
.swipe label[for^=indicator1] {
  left: 44%;
}
.swipe label[for^=indicator2] {
  left: 49%;
}
.swipe label[for^=indicator3] {
  left: 54%;
}
.swipe input {
  display: none;
}

#indicator1:checked ~ ul {
  margin-left: 0;
}
#indicator1:checked ~ label[for=indicator1] {
  background-color: #fff;
}

#indicator2:checked ~ ul {
  margin-left: -800px;
}
#indicator2:checked ~ label[for=indicator2] {
  background-color: #fff;
}

#indicator3:checked ~ ul {
  margin-left: -1600px;
}
#indicator3:checked ~ label[for=indicator3] {
  background-color: #fff;
}/*# sourceMappingURL=index.css.map */